{{ template "header.html" }}

<div class="item">
    WebToolsGo--二维码生成
</div>
<div class="item">
    <label>
        <textarea name="text">test</textarea>
    </label>
</div>

<div class="item">
    <label>
        选择二维码中心的LOGO（选填） <input type="file" name="file" id="file">
    </label>
</div>
<button onclick="cancelChecked()" style="width: 150px">取消LOGO选择</button>

<button onclick="generateQrcode()">生成</button>

<div style="margin-top: 25px">
    <img src="" alt="" id="qrcode" style="border: 1px solid #cccccc">
</div>

<script>
    var logo = ""

    $('body').on('change','#file',function(){
        var formData = new FormData();
        var name = $($(this)).val();
        var files = $($(this))[0].files[0];
        formData.append("file", files);
        formData.append("name", name);
        //另外加的参数
        formData.append("act", "PostImg");
        $.ajax({
            url: '/file-upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            async: false,
            success:function (res) {
                alert('Logo 已上传');
                logo = res.url
            }
            ,error:function (res) {
                alert('错误');
                console.log("Error:" + res)
            }
        });
    })

    function generateQrcode() {
        var text = $("textarea[name='text']").val()
        text = text.replace("&", "%26")
        if (logo == "" || logo == undefined || logo == null) {
            $("#qrcode").attr("src", "/qrcode/generate?text=" + text)
        } else {
            $("#qrcode").attr("src", "/qrcode/generate?text=" + text + "&logo=" + logo)
        }
    }

    function cancelChecked() {
        var file = $("input[name='file']") ;
        file.after(file.clone().val(""));
        file.remove();
        logo = ""
    }
</script>

{{ template "footer.html" }}